<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        section {
            height: 100vh;
        }

        .gImg {
            background-attachment: fixed;
            background-size: cover;
            background-position: center center;
            width: 100%;
        }

        .gImg1 {
            background-image: url(@/assets/mac1.jpg);
        }

        .gImg2 {
            background-image: url(@/assets/mac2.jpg);
        }

        .gImg3 {
            background-image: url(@/assets/mac4.jpg);
        }
    </style>
</head>
<body>
<section className={`${styles.gImg} ${styles.gImg1}`}>IMG1</section>
<section className={`${styles.gImg} ${styles.gImg2}`}>IMG2</section>
<section className={`${styles.gImg} ${styles.gImg3}`}>IMG3</section>
</body>
</html>